<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .outer{
      width: 500px;
      height: 500px;
      background-color: azure;
      position: relative;
    }

    .box{
      width: 200px;
      height: 200px;
    }

    .box1{
      background-color: rebeccapurple;
      /* position: relative;
      left: 200px; */
      position: absolute;
      left: 200px;
    }

    .box2{
      background-color: blue;
    }

    /* 使用绝对定位后，任何元素都会成为定位元素，默认宽高内容撑开，可以设置宽高 */
    /* 使用固定定位也是 */
    .text{
      background-color: burlywood;
      height: 100px;
      width: 100px;
      /* position: absolute; */
      position: fixed;
      top: 20px;
    }
  </style>
</head>
<body>
  <div class="outer">
    <div class="box box1"></div>
    <div class="box box2"></div>
    <span class="text">22222</span>
  </div>
</body>
</html>

<!-- 
1. 静态定位（Static Positioning）
静态定位是所有元素的默认定位方式。当元素为静态定位时，它们会按照正常的文档流进行布局，即元素的位置由它在HTML文档中的位置决定。

2. 相对定位（Relative Positioning）
相对定位允许你相对于元素的正常位置进行偏移。设置了相对定位的元素仍然会占据它在文档流中的原始空间。

3. 绝对定位（Absolute Positioning）
绝对定位允许你将元素相对于其最近的已定位（即非static）祖先元素进行定位。如果没有这样的祖先元素，则相对于文档的<html>元素定位。绝对定位的元素会从文档流中脱离，不再占据空间。

4. 固定定位（Fixed Positioning）
固定定位是一种绝对定位的形式，但它是相对于浏览器窗口进行定位的。即使页面滚动，固定定位的元素也会保持在相同的位置。

5. 粘性定位（Sticky Positioning）
粘性定位可以被认为是相对定位和固定定位的混合体。元素在达到某个滚动位置之前为相对定位，在达到该位置后变为固定定位。


当使用绝对定位或固定定位时，元素会从文档流中脱离，不再占据空间。
相对定位和粘性定位的元素仍然占据它们在文档流中的原始空间。
粘性定位在某些旧浏览器上可能不受支持。
使用定位时，经常需要设置元素的top、right、bottom和left属性来指定偏移量。
绝对定位和固定定位的元素可以通过设置z-index属性来控制堆叠顺序。

-->